function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map((child) => {
        return typeof child === "object" ? child : createTextVDom(child);
      }),
    },
  };
}

function createTextVDom(text) {
  return {
    type: "TEXT",
    props: {
      nodeValue: text,
    },
  };
}

function render(vDom, container) {
  let dom;
  if (typeof vDom !== "object") {
    dom = document.createTextNode(vDom);
  } else {
    dom = document.createElement(vDom.type);
  }
  // 将vdom除了children之外的所有属性都挂载到dom上
  if (vDom.props) {
    Object.keys(vDom.props)
      .filter((key) => key != "children")
      .forEach((item) => {
        dom[item] = vDom.props[item];
      });
  }
  //   如果不是1个数组，那么就直接进行渲染
  if (
    vDom.props &&
    vDom.props.children &&
    typeof vDom.props.children !== "string" &&
    Array.isArray(vDom.props.children)
  ) {
    console.log(typeof vDom.props.children);
    console.log(vDom.props.children);
    vDom.props.children.forEach((child) => render(child, dom));
  }

  //   如果还有子元素，就可以递归调用render函数
  if (
    vDom.props &&
    vDom.props.children &&
    typeof vDom.props.children !== "string" &&
    !Array.isArray(vDom.props.children)
  ) {
    console.log(typeof vDom.props.children);
    console.log(vDom.props.children);
    render(vDom.props.children, dom);
  }

  //   如果不是1个数组，那么就直接进行渲染
  if (
    vDom.props &&
    vDom.props.children &&
    typeof vDom.props.children === "string"
  ) {
    render(vDom.props.children, dom);
  }

  container.appendChild(dom);
}
function useState() {}
export default {
  createElement,
  render,
  useState,
};
